<template>
  <div id="app">
    <!-- 标题 -->
    <div class="title">{{ titleTxt }}</div>

    <div class="flex-row">
      <div class="flex_col">
        <div class="flex_col mt10">
          <div class="flex_row whiteBg">
            <div class="echartTitle">{{ showOneTxt }}</div>
            <div class="flex1"></div>
          </div>
          <div class="whiteBg">
            <div class="info1 flex_row flex_ji_cen">
              <div class="info2 flex1 flex_col">
                <div class="txt1">新能源装机量 | 万千瓦</div>
                <div class="txt2">3456</div>
              </div>
              <div class="line"></div>
              <div class="info2 flex1 flex_col">
                <div class="txt1">新能源发电量丨亿千瓦时</div>
                <div class="txt2">2785</div>
              </div>
            </div>
          </div>
          <div :id="`main1`" class="allEchart"></div>
        </div>
        <div class="flex_col mt10">
          <div class="flex_row whiteBg">
            <div class="echartTitle">{{ showTwoTxt }}</div>
            <div class="flex1"></div>
          </div>
          <div class="whiteBg">
            <div class="info1 flex_row flex_ji_cen">
              <div class="info2 flex1 flex_col">
                <div class="txt1">目标值丨千瓦时</div>
                <div class="txt2">3456</div>
              </div>
              <div class="line"></div>
              <div class="info2 flex1 flex_col">
                <div class="txt1">当前值丨千瓦时</div>
                <div class="txt2">2785</div>
              </div>
              <div class="line"></div>
              <div class="info2 flex1 flex_col">
                <div class="txt1">未完成率丨%</div>
                <div class="txt2">45</div>
              </div>
            </div>
          </div>
          <div :id="`main2`" class="allEchart"></div>
        </div>
        <div class="flex_col mt10">
          <div class="flex_row whiteBg">
            <div class="echartTitle">{{ showThreeTxt }}</div>
            <div class="flex1"></div>
          </div>
          <div class="whiteBg">
            <div class="info1 flex_row flex_ji_cen">
              <div class="info2 flex1 flex_col">
                <div class="txt1">目标值丨千瓦时</div>
                <div class="txt2">3456</div>
              </div>
              <div class="line"></div>
              <div class="info2 flex1 flex_col">
                <div class="txt1">当前值丨千瓦时</div>
                <div class="txt2">2785</div>
              </div>
              <div class="line"></div>
              <div class="info2 flex1 flex_col">
                <div class="txt1">未完成率丨%</div>
                <div class="txt2">45</div>
              </div>
            </div>
          </div>
          <div :id="`main3`" class="allEchart"></div>
        </div>
        <div class="flex_col mt10">
          <div class="flex_row whiteBg">
            <div class="echartTitle">{{ showFourTxt }}</div>
            <div class="flex1"></div>
          </div>
          <div class="whiteBg">
            <div class="info1 flex_row flex_ji_cen">
              <div class="info2 flex1 flex_col">
                <div class="txt1">目标值丨千瓦时</div>
                <div class="txt2">3456</div>
              </div>
              <div class="line"></div>
              <div class="info2 flex1 flex_col">
                <div class="txt1">当前值丨千瓦时</div>
                <div class="txt2">2785</div>
              </div>
              <div class="line"></div>
              <div class="info2 flex1 flex_col">
                <div class="txt1">未完成率丨%</div>
                <div class="txt2">45</div>
              </div>
            </div>
          </div>
          <div :id="`main4`" class="allEchart"></div>
        </div>
        <div class="flex_col mt10">
          <div class="flex_row whiteBg">
            <div class="echartTitle">{{ showFiveTxt }}</div>
            <div class="flex1"></div>
          </div>
          <div class="whiteBg">
            <div class="info1 flex_row flex_ji_cen">
              <div class="info2 flex1 flex_col">
                <div class="txt1">目标值丨千瓦时</div>
                <div class="txt2">3456</div>
              </div>
              <div class="line"></div>
              <div class="info2 flex1 flex_col">
                <div class="txt1">当前值丨千瓦时</div>
                <div class="txt2">2785</div>
              </div>
              <div class="line"></div>
              <div class="info2 flex1 flex_col">
                <div class="txt1">未完成率丨%</div>
                <div class="txt2">45</div>
              </div>
            </div>
          </div>
          <div :id="`main5`" class="allEchart"></div>
        </div>
        <div class="flex_col mt10">
          <div class="flex_row whiteBg">
            <div class="echartTitle">{{ showSixTxt }}</div>
            <div class="flex1"></div>
          </div>
          <div class="whiteBg">
            <div class="info1 flex_row flex_ji_cen">
              <div class="info2 flex1 flex_col">
                <div class="txt1">目标值丨千瓦时</div>
                <div class="txt2">3456</div>
              </div>
              <div class="line"></div>
              <div class="info2 flex1 flex_col">
                <div class="txt1">当前值丨千瓦时</div>
                <div class="txt2">2785</div>
              </div>
              <div class="line"></div>
              <div class="info2 flex1 flex_col">
                <div class="txt1">未完成率丨%</div>
                <div class="txt2">45</div>
              </div>
            </div>
          </div>
          <div :id="`main6`" class="allEchart"></div>
        </div>
        <div class="flex_col mt10">
          <div class="flex_row whiteBg">
            <div class="echartTitle">{{ showSevenTxt }}</div>
            <div class="flex1"></div>
          </div>
          <div class="whiteBg">
            <div class="info1 flex_row flex_ji_cen">
              <div class="info2 flex1 flex_col">
                <div class="txt1">目标值丨千瓦时</div>
                <div class="txt2">3456</div>
              </div>
              <div class="line"></div>
              <div class="info2 flex1 flex_col">
                <div class="txt1">当前值丨千瓦时</div>
                <div class="txt2">2785</div>
              </div>
              <div class="line"></div>
              <div class="info2 flex1 flex_col">
                <div class="txt1">未完成率丨%</div>
                <div class="txt2">45</div>
              </div>
            </div>
          </div>
          <div :id="`main7`" class="allEchart"></div>
        </div>
        <div class="flex_col mt10 mb100">
          <div class="flex_row whiteBg">
            <div class="echartTitle">{{ showEightTxt }}</div>
            <div class="flex1"></div>
          </div>
          <div :id="`main8`" class="allEchart"></div>
        </div>


      </div>
    </div>
    <!-- 底部 -->
    <section class="bottom active">
      <div class="flex">
        <router-link :to="{ path: '/chart' }">
          <i class="icon-home icon"></i>
          <span class="txt">业务管理</span>
        </router-link>
      </div>
      <div class="flex active">
        <router-link :to="{ path: '/businessManage' }">
          <i class="icon-order icon"></i>
          <span class="txt">分析系统</span>
        </router-link>
      </div>
      <div class="flex">
        <router-link :to="{ path: '/personalCenter' }">
          <i class="icon-my icon"></i>
          <span class="txt">我的</span>
        </router-link>
      </div>
    </section>
  </div>
</template>
<script>
//导入组件
import echarts from "echarts";
export default {
  //注册组件
  components: {},
  name: "businessManage",
  data() {
    return {
      titleTxt: "分析系统",
      //显示哪些图表
      showOneTxt: "电力装机容量及发电量结构",
      showTwoTxt: "电力总装机容量",
      showThreeTxt: "总发电量",
      showFourTxt: "外送电量",
      showFiveTxt: "煤电供电标准煤耗",
      showSixTxt: "火电设备平均利用小时数",
      showSevenTxt: "新能源消纳责任权重",
      showEightTxt: "用电量及负荷",
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.radarEchart1(`main1`);
      this.barTwo1(`main2`);
      this.barTwo1(`main3`);
      this.barTwo1(`main4`);
      this.barTwo1(`main5`);
      this.barTwo1(`main6`);
      this.lineEchart1(`main7`);
      this.pictorialBarEchart1(`main8`);
    });
  },
  methods: {
    //雷达图1
    radarEchart1(id) {
      echarts.init(document.getElementById(id)).setOption({
        color:['#357FFF','#5AD8A6'],
        tooltip: {},
        legend: {
          data: ["装机完成率", "发电量完成率"],
          right: "5%",
          orient: "vertical",
          textStyle: {
            color: "#999"
          },
        },
        radar: {
          // shape: 'circle',
          name: {
          },
          indicator: [
            { name: "风电", max: 100 },
            { name: "光电", max: 100 },
            { name: "水电", max: 100 },
            { name: "火电", max: 100 },
            { name: "其他", max: 100 },
          ],
          nameTextStyle:{
            color:"#999"
          },
          radius: ["0%", "60%"],
          splitArea: {
            show: false
          },
        },
        series: [
          {
            type: "radar",
            // areaStyle: {normal: {}},
            data: [
              {
                value: [80, 20, 90, 70, 20],
                name: "装机完成率",
                areaStyle: {
                  color: "rgba(71, 143, 248, 0.3)"
                },
                lineStyle:{
                  color:"#357FFF"
                },
                itemStyle: {
                  borderColor: "#357FFF"
                },
              },
              {
                value: [30, 10, 60 ,15, 70],
                name: "发电量完成率",
                areaStyle: {
                  color: "rgba(117, 220, 165, 0.6)"
                },
                lineStyle:{
                  color:"#5AD8A6"
                },
                itemStyle: {
                  borderColor: "#5AD8A6"
                },
              },
            ],
            symbolSize: 10,
          },
        ],
      });
    },

    //柱状图1
    barTwo1(id) {
      echarts.init(document.getElementById(id)).setOption({
        color: ["#357FFF", "#5AD8A6"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          right: "5%",
          orient: "horizontal",
          data: ["计划值", "完成值"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["2015", "2016", "2017", "2018", "2019"],
          axisTick: {
            show: false, //刻度尺
          },
          axisLine: {
            show: false, //坐标轴线
          },
          splitLine: {
            show: false, //分隔线。默认数值轴显示，类目轴不显示。
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
        },
        yAxis: {
          type: "value",
          name:"亿千瓦时",
          nameTextStyle:{
            color:"#999"
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
              color: "#F5F5F5",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
        },
        series: [
          {
            name: "计划值",
            type: "bar",
            stack: "总量",
            data: [1600, 3600, 5100, 6200, 7800],
            itemStyle: {
              color: "#357FFF",
            },
            barWidth: 35,
          },
          {
            name: "完成值",
            type: "bar",
            stack: "总量",
            data: [400, 900, 1100, 1300, 1400],
            itemStyle: {
              color: "#5AD8A6",
            },
            barWidth: 35,
          },
        ],
      });
    },

    //折线图1
    lineEchart1(id) {
      let data = [
        ["2000-06-05", 116],
        ["2000-06-06", 129],
        ["2000-06-07", 135],
        ["2000-06-08", 86],
        ["2000-06-09", 73],
        ["2000-06-10", 85],
        ["2000-06-11", 73],
        ["2000-06-12", 68],
        ["2000-06-13", 92],
        ["2000-06-14", 130],
        ["2000-06-15", 245],
        ["2000-06-16", 139],
        ["2000-06-17", 115],
        ["2000-06-18", 111],
        ["2000-06-19", 309],
        ["2000-06-20", 206],
        ["2000-06-21", 137],
        ["2000-06-22", 128],
        ["2000-06-23", 85],
        ["2000-06-24", 94],
        ["2000-06-25", 71],
        ["2000-06-26", 106],
        ["2000-06-27", 84],
        ["2000-06-28", 93],
        ["2000-06-29", 85],
        ["2000-06-30", 73],
        ["2000-07-01", 83],
        ["2000-07-02", 125],
        ["2000-07-03", 107],
        ["2000-07-04", 82],
        ["2000-07-05", 44],
        ["2000-07-06", 72],
        ["2000-07-07", 106],
        ["2000-07-08", 107],
        ["2000-07-09", 66],
        ["2000-07-10", 91],
        ["2000-07-11", 92],
        ["2000-07-12", 113],
        ["2000-07-13", 107],
        ["2000-07-14", 131],
        ["2000-07-15", 111],
        ["2000-07-16", 64],
        ["2000-07-17", 69],
        ["2000-07-18", 88],
        ["2000-07-19", 77],
        ["2000-07-20", 83],
        ["2000-07-21", 111],
        ["2000-07-22", 57],
        ["2000-07-23", 55],
        ["2000-07-24", 60],
      ];
      let data2 = [
        ["2000-06-05", 60],
        ["2000-06-06", 66],
        ["2000-06-07", 50],
        ["2000-06-08", 46],
        ["2000-06-09", 30],
        ["2000-06-10", 30],
        ["2000-06-11", 25],
        ["2000-06-12", 30],
        ["2000-06-13", 34],
        ["2000-06-14", 36],
        ["2000-06-15", 38],
        ["2000-06-16", 36],
        ["2000-06-17", 34],
        ["2000-06-18", 38],
        ["2000-06-19", 42],
        ["2000-06-20", 45],
        ["2000-06-21", 44],
        ["2000-06-22", 46],
        ["2000-06-23", 52],
        ["2000-06-24", 78],
        ["2000-06-25", 79],
        ["2000-06-26", 106],
        ["2000-06-27", 110],
        ["2000-06-28", 113],
        ["2000-06-29", 114],
        ["2000-06-30", 106],
        ["2000-07-01", 102],
        ["2000-07-02", 99],
        ["2000-07-03", 98],
        ["2000-07-04", 93],
        ["2000-07-05", 88],
        ["2000-07-06", 82],
        ["2000-07-07", 86],
        ["2000-07-08", 87],
        ["2000-07-09", 78],
        ["2000-07-10", 60],
        ["2000-07-11", 63],
        ["2000-07-12", 88],
        ["2000-07-13", 107],
        ["2000-07-14", 131],
        ["2000-07-15", 111],
        ["2000-07-16", 87],
        ["2000-07-17", 88],
        ["2000-07-18", 88],
        ["2000-07-19", 99],
        ["2000-07-20", 83],
        ["2000-07-21", 111],
        ["2000-07-22", 57],
        ["2000-07-23", 55],
        ["2000-07-24", 60],
      ];

      let dateList = data.map(function (item) {
        return item[0];
      });
      let valueList = data.map(function (item) {
        return item[1];
      });
      let valueList2 = data2.map(function (item) {
        return item[1];
      });
      echarts.init(document.getElementById(id)).setOption({
        tooltip: {
          trigger: "axis",
        },
        color:["#357FFF","#FFE364"],
        legend: {
          right: "5%",
          orient: "horizontal",
          data: ["最低消纳责任权重", "激励性消纳责任权重"],
          icon: "rect",
          itemWidth:14,
        },
        grid: {
          top: "15%",
        },
        xAxis: [
          {
            axisTick: {
              show: false, //刻度尺
            },
            axisLine: {
              show: false, //坐标轴线
            },
            splitLine: {
              show: false, //分隔线。默认数值轴显示，类目轴不显示。
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
            data: dateList,
          },
        ],
        yAxis: [
          {
            splitLine: { show: false },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
                color: "#F5F5F5",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#999999", //坐标轴字体颜色
              },
            },
          },
        ],
        series: [
          {
            type: "line",
            name:"最低消纳责任权重",
            showSymbol: false,
            lineStyle: {
              color: "#357FFF",
            },
            data: valueList,
          },
          {
            type: "line",
            name:"激励性消纳责任权重",
            showSymbol: false,
            lineStyle: {
              color: "#F7B500",
            },
            data: valueList2,
          },
        ],
      });
    },


    //三角形柱状图
    pictorialBarEchart1(id) {
      echarts.init(document.getElementById(id)).setOption({
        grid: {
          left: "3%", //左边距
          right: "5%",
          bottom: "3%",
          top: "13%",
          containLabel: true, //刻度标签,这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
        },
        xAxis: {
          data: ["最高用电负荷", "居民人均用电量", "全社会用电量"],

          axisTick: {
            show: false,
          },
          axisLine: {
            show: false, //坐标轴线
          },
          splitLine: {
            show: false, //分隔线。默认数值轴显示，类目轴不显示。
          },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
        },
        yAxis: {
          name:"%",
          nameTextStyle:{
            color:"#999",
            align: "right"
          },
          min:0,
          max:100,
          interval: 20,
          splitLine: { show: false },
          axisLabel: {
            textStyle: {
              color: "#999999", //坐标轴字体颜色
            },
          },
          axisTick: {
            show: false, //刻度尺
          },
          axisLine: {
            show: false, //坐标轴线
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色color: ['#F5F5F5','#F0F0F0']
              color: "#F5F5F5",
            },
          },
          type: "value", //数值轴
        },
        series: [
          {
            type: "pictorialBar",
            symbolSize: ["130%", "100%"],
            symbolPosition: "center",
            z: 10,

            data: [
              {
                value: 26,
                // Built-in type, can be 'circle', 'rect', 'roundRect', 'square', 'diamond', 'triangle', 'pin', 'arrow'.
                symbol: "triangle",
                itemStyle: {
                  color: "#357FFF",
                },
              },
              {
                value: 96,
                // Built-in type, can be 'circle', 'rect', 'roundRect', 'square', 'diamond', 'triangle', 'pin', 'arrow'.
                symbol: "triangle",
                itemStyle: {
                  color: "#5AD8A6",
                },
              },
              {
                value: 60,
                // Built-in type, can be 'circle', 'rect', 'roundRect', 'square', 'diamond', 'triangle', 'pin', 'arrow'.
                symbol: "triangle",
                itemStyle: {
                  color: "#5D7092",
                },
              },
            ],
          },
        ],
      });
    },

  },
};
</script>

<style lang="less" scoped>
.title {
  padding-top: 30px;
  padding-left: 20px;
  padding-bottom: 10px;
  font-size: 24px;
  color: #0f0d3a;
  background: #ffffff;
  box-shadow: 0px 0px 5px #888888;
}
.allEchart {
  width: 100%;
  height: 300px;
  margin: 0px;
  border: 1px solid #ddd;
  background: #ffffff;
}
.whiteBg {
  background: #ffffff;
}
.echartTitle {
  width: auto;
  margin-left: 15px;
  padding: 20px;
  color: #0f0d3a;
  font-size: 16px;
  border-bottom: 1px solid #357fff;
}
.mt10 {
  margin-top: 10px;
}
.info1 {
  height: 60px;
  background: rgba(149, 216, 248, 0.2);
  border-radius: 2px;
  border-radius: 2px;
  margin: 10px;
}
.line {
  width: 1px;
  height: 20px;
  margin-top: 20px;
  background: #b9c9e5;
}
.txt1 {
  font-family: PingFangSC-Regular;
  font-size: 10px;
  color: #666666;
  text-align: center;
  letter-spacing: 0;
  margin-top: 8px;
}
.txt2 {
  font-family: DINCond-Black;
  font-size: 24px;
  font-weight: bold;
  color: #357fff;
  text-align: center;
}
</style>
